<template>
  <div class="todoapp">
    <TodoHeader @addTask="addTaskHandler" :list="showList"></TodoHeader>
    <TodoMain @delTask="delTaskHandler" :list="showList"></TodoMain>
    <TodoFooter
      @clearDone="clearDoneHandler"
      @changeSel="changeSelHanler"
      :list="showList"
    ></TodoFooter>
  </div>
</template>

<script>
// 1. 数据渲染至 TodoMain 中
// 1.1 父传子 TodoMain 中 props 接收， v-for 循环渲染
// 1.2 添加 completed: 完成的类名

// 2. 添加渲染至 TodoHeader
// 2.1 父传子 props 接收数据
// 2.2 双向绑定一个变量，绑定一个键盘 enter 事件
// 2.3 键盘事件内，非空判断 / 子传父给父组件处理添加进 list / 清空文本框

// 3. 删除
// 3.1 TodoMain 中给按钮绑定点击事件带实参，实参为索引，子传父-利用 this.$emit()
// 3.2 父组件中 绑定自定义事件， findindex 方法找到当前点击下标，根据下标删除

// 导入
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('todolist') || '[]'), // 接收侦听器内的本地存储的数据
      isSel: 'all' // 设置一个状态，方便操作 TodoFooter 中的数据切换
    }
  },

  methods: {
    addTaskHandler (taskname) {
      // 优化 id ，因为当 list 长度为0时，无法获取 id
      let id =
        this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100
      // 添加进数组
      this.list.push({
        id,
        name: taskname,
        isDone: false
      })
    },
    delTaskHandler (id) {
      // 找到当前点击的下标
      const index = this.list.findIndex(index => index == id)
      // console.log(index)

      // 根据下标删除数据
      this.list.splice(index, 1)
    },
    changeSelHanler (isSel) {
      this.isSel = isSel // 接收 TodoFooter 中的 isSel 状态赋值给父组件的 isSel
    },
    clearDoneHandler () {
      // 找到未完成的数据，覆盖 list 数组，
      this.list = this.list.filter(item => !item.isDone)
    }
  },
  computed: {
    // 数据切换
    showList () {
      // 如果 isSel 状态是 yes ，则显示已完成的数据
      if (this.isSel == 'yes') {
        return this.list.filter(item => item.isDone)
      } else if (this.isSel == 'no') {
        // 如果 isSel 状态是 no ，则显示未完成的数据
        return this.list.filter(item => !item.isDone)
      } else {
        return this.list // 显示 list 的数据
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler () {
        // 当数组发生变化时，存入本地
        localStorage.setItem('todolist', JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
